<template>
  <div>
    <a-card>
      <a-row>
        <a-col :span="4">
          <a-col :span="10">
            <a-icon type="pic-left"/>
          </a-col>
          <a-col :span="14">
            <span>ss</span><br><span>54364</span>
          </a-col>
        </a-col>
        <a-col :span="4">
          <a-col :span="10">
            <a-icon type="pic-left"/>
          </a-col>
          <a-col :span="14">
            <span>ss</span><br><span>54364</span>
          </a-col>
        </a-col>
        <a-col :span="4">
          <a-col :span="10">
            <a-icon type="pic-left"/>
          </a-col>
          <a-col :span="14">
            <span>ss</span><br><span>54364</span>
          </a-col>
        </a-col>
        <a-col :span="4">
          <a-col :span="10">
            <a-icon type="pic-left"/>
          </a-col>
          <a-col :span="14">
            <span>ss</span><br><span>54364</span>
          </a-col>
        </a-col>
        <a-col :span="4">
          <a-col :span="10">
            <a-icon type="pic-left"/>
          </a-col>
          <a-col :span="14">
            <span>ss</span><br><span>54364</span>
          </a-col>
        </a-col>
        <a-col :span="4">
          <a-col :span="10">
            <a-icon type="pic-left"/>
          </a-col>
          <a-col :span="14">
            <span>ss</span><br><span>54364</span>
          </a-col>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-form :form="form" @submit="handleSubmit" layout="inline">
        <a-form-item>
          <a-input v-decorator="['note']" placeholder="请输入关键字"/>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">查找</a-button>
        </a-form-item>
        <a-form-item>
          <a-button class="start-btn">
            <a-icon type="caret-right" class="start-icon" style="color: #66CC00;"/>
            启动
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button class="start-btn">
            <a-icon type="stop" class="start-icon" style="color: #E77878;"/>
            停止
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button class="start-btn">
            <a-icon type="sync" class="start-icon" style="color: #33CCFF;"/>
            刷新
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-checkbox-group>
            <a-checkbox value="1">
              异常
            </a-checkbox>
            <a-checkbox value="2">
              运行中
            </a-checkbox>
            <a-checkbox value="3">
              已停止
            </a-checkbox>
          </a-checkbox-group>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card>
      <a-table
        ref="dataTable"
        rowKey="serviceId"
        :columns="columns"
        :data-source="tableData"
        :row-selection="rowSelection"></a-table>
    </a-card>
  </div>
</template>

<script>
  import { getServiceList } from '@/api/serviceCenter/index'
  export default {
    name: 'serviceTable',
    props:{
      serviceType:{
        type: String,
        default:''
      },
    },
    data () {
      return {
        rowSelection: {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          },
          onSelect: (record, selected, selectedRows) => {
            console.log(record, selected, selectedRows)
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            console.log(selected, selectedRows, changeRows)
          },
        },
        columns:[
          {
            title: '编号',
            dataIndex: 'idx',
          },
          {
            title: '服务名',
            dataIndex: 'serviceName',
          },
          {
            title: '运行状态',
            dataIndex: 'serviceStatus',
          },
          {
            title: '服务类型',
            dataIndex: 'serviceType',
          },
          {
            title: '调用方',
            dataIndex: 'callerId',
          },
          {
            title: 'URL',
            dataIndex: 'url',
          },
          {
            title: '发布时间',
            dataIndex: 'publishTime',
          },
          {
            title: '耗时',
            dataIndex: 'avgCostTime',
          },
          {
            title: '请求格式',
            dataIndex: 'requestFmt',
          },
          {
            title: '响应格式',
            dataIndex: 'responseFmt',
          },
          {
            title: '交互量',
            dataIndex: 'requestCount',
          },
        ],
        tableData: [],
        searchForm: {
          current: 1,
          pageSize: 10,
          serviceType:this.serviceType
        },
        total: 0,
        form: this.$form.createForm(this, { name: 'coordinated' }),
      }
    },
    methods: {
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
          }
        })
      },
      onShowSizeChange (current, pageSize) {
        console.log(current, pageSize)
      },
      getListData () {
        getServiceList(this.searchForm).then(res => {
          if (res.code == 200) {
            this.tableData = res.data
          } else {
            this.$notification['error']({
              message: '错误',
              description: res.data.message || '网络连接错误',
              duration: 3
            })
          }
        })
      }
    },
    mounted () {
      this.getListData()
    }
  }
</script>

<style scoped type="less">
  .start-btn {
    border: none;
    box-shadow: none;
  }

  .start-btn {
    font-size: 16px;
  }
</style>

